
<!-- The images page, refer to static/js/controller -->
<div>

  <span class="page-header">
    <!-- Display images title and the JSON link -->
    <h1 class="page-header-left">{{'images'|translate}} <a ng-href="{{canonicalServer}}/images/json" target="_blank"><img src="static/img/json-logo.png" height="32"></a></h1>

    <!-- Display search form in the right -->
    <div class="page-header-right">
      <input type="text" class="form-control" placeholder="{{'search'|translate}}" ng-model="search" autofocus>
    </div>
  </span> <!-- End of page header -->

  <!-- Todo: No need to use <br/> -->
  <br/><br/><br/><br/>

  <!-- Alert if we get nothing from server -->
  <div ng-show="!images.length" class="alert alert-danger" role="alert">{{'no_docker_image'|translate}}</div>

  <!-- Display all images information -->
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th><a href="" ng-click="predicate='Id'; reverse=!reverse">{{'id'|translate}}</a></th>
        <th><a href="" ng-click="predicate='RepoTags'; reverse=!reverse">{{'repotags'|translate}}</a></th>
        <th><a href="" ng-click="predicate='Created'; reverse=!reverse">{{'created'|translate}}</a></th>
        <th><a href="" ng-click="predicate='VirtualSize'; reverse=!reverse">{{'virtualsize'|translate}}</a></th>
        <th>{{'operation'|translate}}</th>
      </tr>
    </thead>

    <tbody>
      <!-- When search result is null, display the message -->
      <tr ng-show="(images | filter: search).length == 0">
        <td colspan="7" align="center">{{'no_search_result_for'|translate}} <b style="color:blue">{{search}}</b></td>
      </tr>

      <tr ng-repeat="image in images | filter: search | orderBy:predicate:reverse track by $index ">
        <td><a ng-href="/images/{{image.Id}}">{{image.Id | limitTo:12}}</a></td> <!-- Shorten image id -->
        <td>{{image.RepoTags | array_to_string}}</td> <!-- Add comma between tags -->
        <td>{{image.Created * 1000 | date:'yyyy-MM-dd'}}</td> <!-- Full time with 'yyyy-MM-dd HH:mm:ss Z' -->
        <td>{{image.VirtualSize | filesize:2}}</td> <!-- Convert to readable size -->
        <td><button class="btn btn-danger" ng-click="deleteImage(image.Id)">{{'delete'|translate}}</button></td>
      </tr>
    </tbody>
  </table>

</div> <!-- End of this angular page -->
